<template>
  <div class="c-loading-box" v-show="isShowLoading">
    <div class="container">
      <div class="loading">
        <div class="petal"
        v-for="n in 12"
        :class="'petal' + (n+1)"
        :style="getPetalStyle(n)"></div>
      </div>
      <div class="text" v-show="msg">
        <span>{{msg}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  const DEFAULT_MESSAGE = '正在加载...'
  
  module.exports = {

    data () {
      return {
        isShowLoading: false,
        msg: DEFAULT_MESSAGE
      }
    },

    methods: {
      getPetalStyle (n) {
        return `transform: rotate(${30 * n}deg) translate3d(0,-0.4rem,0);-webkit-animation-delay:${n * 0.05}s`
      },

      show (str) {
        this.msg = str
        this.isShowLoading = true
      },

      hide () {
        this.isShowLoading = false
        this.msg = DEFAULT_MESSAGE
      }
    }
  }

</script>
<style lang="stylus">

  .c-loading-box
    width 100%
    height 100%
    position absolute
    top 0
    left 0
    background rgba(0,0,0,0.85)
    .container
      width 70%
      height auto
      min-height 4rem
      border-radius 0.2rem
      background #fff
      position absolute
      top 40%
      left 50%
      transform translate3d(-50%, -50%, 0)
      .loading
        width 3rem
        height 3rem
        margin 0 auto
        position relative
        .petal
          width 0.08rem
          height 0.25rem
          background rgba(0,0,0,0)
          position absolute
          top 1.25rem
          left 1.5rem
          border-radius 0.1rem
          transform-origin 50% 50%
          animation bouncedelay 0.6s infinite ease-in-out
      .text
        color #2e2e2e
        text-align center
        padding 0 0.5rem 0.5rem
        font-size 0.4rem

  @keyframes bouncedelay {
    0%, 80%, 100% {
      background rgba(0,0,0,0.2)
    } 40% {
      background rgba(0,0,0,0.8)
    }
  }

</style>
